<template>
  <view class="videoPlay">
    <video 
    id="myVideo" 
    class='video' 
    :src="video.src" 
    :controls="false" 
    loop="true" 
    @click="clickVideo"
    :autoplay="autoplay"></video>
  </view>

</template>

<script>
  export default {
    name:"videoPlay",
    props:['video','index'],
    data() {
      return {
       play:false,
       autoplay:false
      };
    },
    onReady(){
      this.videoContext = uni.createVideoContext('myVideo',this)
    },
    methods:{
      clickVideo(){
        if(this.play===false){
          this.playThis();
        }
        else{
          this.pause();
        }
      },
      player(){
        if(this.play===false){
          this.videoContext.seek(0)
          this.videoContext.play()
          this.play=true
        }
      },
      pause(){
       if(this.play===true){
         this.videoContext.pause()
         this.play=false
       }
      },
      playThis(){
      if(this.play===false){
        this.videoContext.play()
        this.play=true
      }
      },
      atuo(){
        if(this.index===0){
          this.autoplay = true
          this.play=true;
        }
      }
    },
    created(){
      this.atuo()
    }
  }
</script>

<style>
.videoPlay{
  width:100%;
  height:100%;
}
.video{
  width:100%;
  height:100%;
}
</style>